<template>
  <div>
    <div class="choicebox" v-for="item in qustion" :key="item.id">
      <!-- 选择题背景 -->
      <!-- <img src="@/images/choicebg.png" alt="" class="websp" /> -->
      <div class="tmboxtop">
        <!-- <span class="tmlx">{{ item.type }}</span> -->
        <span class="tm">{{ item.name }}</span>
      </div>
      <!--  -->
      <el-checkbox-group v-model="checkList" @change="statusChange(item)">
        <div
          class="tmbox"
          :class="[
            item.des[0].imgs ? 'tmboxs' : '',
            item.id == 7 ? 'xzdc' : ''
          ]"
        >
          <el-checkbox
            v-show="steps != 7.2"
            :class="items.imgs ? 'chosiexxx' : 'chosiexxxs'"
            :label="items.ids"
            :key="items.ids"
            v-for="items in item.des"
            ><div class="tmx1 tool">
              <img :src="items.img" alt="" v-show="!items.imgs" />
              <div
                class="xztw"
                v-if="items.imgs"
                :class="item.des.length == 6 ? 'xzds' : ''"
              >
                {{ items.imgs }}
              </div>
            </div>
          </el-checkbox>
        </div>
        <img
          src="@/images/xbwz.png"
          alt=""
          class="tmsbsb websp"
          v-if="steps == 7"
        />
        <div class="tpzsbox" v-if="steps == 7.2">
          <div
            class="rigbox"
            v-for="item in aimg"
            :key="item.index"
            v-show="item.id == value"
          >
            <img :src="item.img" class="websp" />
          </div>
          <div>
            <el-slider v-model="value" vertical :min="1" :max="10" class="jjb">
            </el-slider>
          </div>
        </div>
      </el-checkbox-group>

      <div class="choisqd tool" @click="yzfn(item)">
        <!-- 1选择题按钮 -->
        <!-- <img src="@/images/choisqd.png" alt="" class="normal websp" />
        <img src="@/images/choisqdac.png" alt="" class="active websp" /> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'XquesTions',

  data() {
    return {
      qustion: [
        {
          id: 15, //题目id
          name: '单选题', //题目类型
          question: '以下哪一个问题对于寄生虫病的诊断比较有价值？', //题目名称
          options: [
            {
              id: 'A', //题目选项id
              name: 'A.您近期或者之前去过什么地方?' // 题目选项
            }
          ],
          answer: ['A'], //正确答案
          des: '' //答案解析表述
        }
      ],

      mk2: [
        {
          id: 1, //题目id
          name: '单选题', //题目类型
          question: '糖尿病患者的理想体重(Kg)计算公式为', //题目名称
          options: [
            {
              id: 'A', //题目选项id
              name: 'A. 身高（cm）－100' // 题目选项
            },
            {
              id: 'B', //题目选项id
              name: 'B. 身高（cm）－105' // 题目选项
            },
            {
              id: 'C', //题目选项id
              name: 'C. 身高（cm）－110 ' // 题目选项
            },
            {
              id: 'D', //题目选项id
              name: 'D. 身高（cm）－115' // 题目选项
            }
          ],
          answer: ['B'], //正确答案
          des: '' //答案解析表述
        },
        {
          id: 2, //题目id
          name: '单选题', //题目类型
          question: '如何评价目前体重情况（ ）？', //题目名称
          options: [
            {
              id: 'A', //题目选项id
              name: 'A.（实际体重-标准体重）/标准体重' // 题目选项
            },
            {
              id: 'B', //题目选项id
              name: 'B.（实际体重-标准体重）/实际体重' // 题目选项
            },
            {
              id: 'C', //题目选项id
              name: 'C.（标准体重-实际体重）/实际体重' // 题目选项
            },
            {
              id: 'D', //题目选项id
              name: 'D.（标准体重-实际体重）/标准体重' // 题目选项
            }
          ],
          answer: ['A'], //正确答案
          des: '' //答案解析表述
        }
      ]
    }
  },

  mounted() {},

  methods: {
    //控制可以选几个
    statusChange(item) {
      if (item.name == '单选题' || item.name == '判断题') {
        if (this.checkList.length > 1) {
          this.checkList.splice(0, 1)
        }
      }
    },
    //验证答案
    yzFn(item) {
      this.audioUrl = ''
      console.log('点击了验证答案', item)
      if (this.checkList.length != 0) {
        if (item.name == '单选题') {
          this.checkList.forEach((items) => {
            item.answer.find((itemx) => {
              if (itemx == items) {
                //单选题正确
                return
              } else {
                //单选题正确 错误
                return
              }
            })
          })
        }
        if (item.name == '多选题') {
          if (this.checkList == null || this.checkList == '') {
            this.addWrongQuestion(item.name, 0, this.wronglist.length + 1)
          }
          if (this.checkList.length < item.answer.length) {
            this.addWrongQuestion(item.name, 0, this.wronglist.length + 1)
          } else {
            const isCorrect = this.checkList.every((answer) =>
              item.answer.includes(answer)
            )

            if (isCorrect) {
              //多选题回答正确
            } else {
              //多选题回答错误
            }
          }
        }
      } else {
        //长度==0 没选择直接全错
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
